import { useState } from 'react'
import { View, Picker } from '@tarojs/components'
import { AtSegmentedControl } from 'taro-ui'
import './index.scss'

import RoomList from './components/room-list'
import MyAppointment from './components/my-appointment'

const Appointment = () => {
  const [dateSel, setDateSel] = useState('')
  const [currentTab, setCurrentTab] = useState(0)

  const onDateChange = e => {
    setDateSel(e.detail.value)
  }

  const handleChangeTab = index => {
    setCurrentTab(index)
  }

  return (
    <View className='appointment-component'>
      {/* 选择时间 */}
      <View>
        <View>选择时间</View>
        <View>
          <Picker value={dateSel} mode='date' onChange={onDateChange}>
            <View className='picker'>
              当前选择：{dateSel}
            </View>
          </Picker>
        </View>
      </View>

      {/* 功能切换 */}
      <View className='tabs'>
        <AtSegmentedControl
          current={currentTab}
          values={['功能室状态', '我的预约']}
          onClick={index => handleChangeTab(index)}
        />
      </View>

      {/* 功能室列表 */}
      {
        currentTab === 0 && <RoomList />
      }

      {/* 我的预约 */}
      {
        currentTab === 1 && <MyAppointment />
      }
    </View>
  )
}

export default Appointment
